<template>
  <div class="mychecking">
    <div class="header"><span>我的考勤</span></div>
    <div class="box">
      <div class="lef">
        <div>
             <el-space wrap>
                <el-date-picker
                    v-model="value"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
          </el-space>
          <el-button type="primary" @click="inquire">查询</el-button>
          <el-button type="primary" @click="rese">重置</el-button>
          <el-button type="primary" @click="piFun">批量异常</el-button>
        </div>
        <el-table height="600px" :data="tableData" style="width: 100%">
          <el-table-column fixed prop="punchMon" label="早打卡事件" width="200">
          </el-table-column>
          <el-table-column prop="punchEve" label="晚打卡时间" width="200">
          </el-table-column>
          <el-table-column prop="state" label="打卡状态" width="200">
              <template #default="scope">
                  <span :class='scope.row.state==1?"colorDiv":scope.row.state == 2 ? "colorred" :scope.row.state == 3 ? "colorred" :""'>
                    {{scope.row.state==0?"正常": (scope.row.state == 1 ? '休假' : (scope.row.state == 2 ? '早退' : "缺勤"))}}</span>
              </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="190">
            <template #default="scope">
              <el-button
                :class='scope.row.state==0?"on":scope.row.state == 1 ? "on" :"on1"'
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >异常申请</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="rig">
        <div class="rig_box">
          <span>全年迟到<font class="colorDiv1">{{yearbelate}}</font></span>
          <span>本月迟到<font class="colorDiv1">{{monthbelate}}</font></span>
          <span>本年早退<font class="colorDiv1">{{yearleave}}</font></span>
          <span>本月早退<font class="colorDiv1">{{monthleave}}</font></span>
          <span>本年缺勤<font class="colorDiv1">{{yearabsence}}</font></span>
          <span>本月缺勤<font class="colorDiv1">{{monthabsence}}</font></span>
        </div>
        <div class="rig_DIV">
          <p>1.每个月底请清除打卡异常，否则会扣除相对应的工资</p>
          <p>2.每月迟到，早退超过3次，每次50元,累计之前的次数</p>
          <p>3.缺勤直接按旷工计算，累计旷工次数，给予重大处罚</p>
        </div>
      </div>
    </div>
    <Checking :form='form'></Checking>
  </div>
</template>
<script>
import Checking from '../../components/checking.vue'
import { reactive, ref } from "vue";
import moment from 'moment'
import {punchlist} from '../../api/punch/punch'
export default {
  data() {
    return {};
  },
  components:{
      Checking
  },
  setup() {
    const tableData = reactive([]);
    const form = reactive({
        dialogFormVisible:false,
        data:[]
    })
    const time= reactive([])
    const value = ref("");
    const yearbelate = ref(0)
    const monthbelate = ref(0)
    const yearleave = ref(0)
    const monthleave = ref(0)
    const yearabsence = ref(0)
    const monthabsence = ref(0)
    // 查询
    const inquire = ()=>{
      let time1=moment(value.value[0]).format('YYYY-MM-DD hh:mm:ss')
      let time2=moment(value.value[1]).format('YYYY-MM-DD hh:mm:ss')
      time.push(time1,time2)
    }
    // 重置
    const rese = ()=>{
      value.value=''
    }
    // 异常申请
    const handleClick = (row) => {
      form.data=[]
      let arr={...row}
      console.log(arr);
      form.dialogFormVisible=true
      form.data.push(arr)
    };
    // 批量异常
    const piFun=()=>{
      form.data=[]
      form.dialogFormVisible=true
      tableData.forEach(v=>{
        if(v.state==2||v.state==3){
          form.data.push(v)
        }
      })
    }
    // 获取数据
    punchlist().then((res)=>{
      if(res.status==200){
        res.data.forEach((v)=>{
          tableData.push(v)
          if(v.state==2){
            yearleave.value++
            monthleave.value++
          }else if(v.state==3){
            yearabsence.value++
            monthabsence.value++
            yearbelate.value++
            monthbelate.value++
          }
        })
      }
    })
    return {
      tableData,
      value,
      form,
      yearbelate,
      monthbelate,
      yearleave,
      monthleave,
      yearabsence,
      monthabsence,
      handleClick,
      piFun,
      rese,
      inquire
    };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/scss.scss";
.mychecking {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.colorDiv{
  color: rgb(88, 173, 207);
}
.colorred{
  color: red;
}
.colorDiv1{
  color: rgb(13, 169, 231);
  font-weight: bold;
  font-size: 15px;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  background: white;

  .lef {
    width: 70%;
  }
  .rig {
    width: 30%;
    .rig_box {
      width: 100%;
      float: left;
      span {
        display: inline-block;
        width: 150px;
        text-align: center;
        line-height: 40px;
      }
    }
    .rig_DIV {
      width: 100%;
      p {
        line-height: 30px;
        margin-left: 8px;
      }
    }
  }
}
.on{
display: none;
}
.header {
  width: 100%;
  height: 32px;
  border-left: $border-left;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  span {
    margin-left: 15px;
  }
}
</style>